<template>
  <div style="padding: 30px">
    <!-- 赛事数据 -->
    <el-row class="header">
      <el-code class="code" @click="goGroup(id)">
        <el-row class="codeText">团队数量</el-row>
        <el-row class="codeNumber">{{ form.groupCounts }}</el-row>
      </el-code>
      <el-code class="code" @click="athletes(id)">
        <el-row class="codeText">参赛运动员</el-row>
        <el-row class="codeNumber">{{ form.players }}</el-row>
      </el-code>
      <el-code class="code" @click="groupCost(id)">
        <el-row class="codeText">赛事金额</el-row>
        <el-row class="codeNumber">{{ form.cptFee }}</el-row>
      </el-code>
      <el-code class="code" @click="peopleFN(id)">
        <el-row class="codeText">参赛人次</el-row>
        <el-row class="codeNumber">{{ form.playerTimes }}</el-row>
      </el-code>
    </el-row>
    <br />

    <el-radio-group v-model="tabPosition">
      <el-radio-button
        @change="organizationFN"
        label="团队参赛人数"
      ></el-radio-button>
      <el-radio-button
        @change="projectFN"
        label="项目参赛人数"
      ></el-radio-button>
    </el-radio-group>

    <br />
    <br />
    <br />
    <el-table
      v-loading="loading"
      :data="list"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="序号" type="index" width="55" align="center" />
      <el-table-column
        label="团队名称"
        prop="name"
        min-width="120"
        v-if="!toggle"
      >
        <template #default="props">
          <div>
            {{ props.row.name || "/" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="项目名称"
        prop="name"
        min-width="120"
        v-if="toggle"
      />
      <el-table-column
        label="组别"
        prop="cptGroupName"
        min-width="120"
        v-if="toggle"
      />
      <el-table-column
        label="团队类型"
        prop="type"
        min-width="120"
        v-if="!toggle"
      >
        <template #default="props">
          <div v-if="props.row.type == 0">俱乐部</div>
          <div v-if="props.row.type == 1">事业单位</div>
          <div v-if="props.row.type == 2">道馆</div>
          <div v-if="props.row.type == 3">企业</div>
          <div v-if="props.row.type == 4">机关</div>
          <div v-if="props.row.type == 5">其他</div>
          <div v-if="!props.row.type">/</div>
        </template>
      </el-table-column>
      <el-table-column
        label="联系人"
        prop="contactPerson"
        min-width="120"
        v-if="!toggle"
      >
        <template #default="props">
          <div>
            {{ props.row.contactPerson || "/" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="联系方式"
        prop="contactTelno"
        min-width="120"
        v-if="!toggle"
      >
        <template #default="props">
          <div>
            {{ props.row.contactTelno || "/" }}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="参赛人数" prop="players" min-width="120" />
      <el-table-column label="参赛人次" prop="playerTimes" min-width="120" />
      <el-table-column
        label="参赛团体数"
        prop="groups"
        min-width="120"
        v-if="toggle"
      />
    </el-table>
    <pagination
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      :total="total"
      @pagination="initData"
    />
  </div>
</template>

<script setup>
import { getList } from "@/api/match/data.js";
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
const router = useRoute();
const route = useRouter();
const id = ref(router.query.id);
const list = ref([]);
const toggle = ref(false);
const total = ref();
const tabPosition = ref("团队参赛人数");
const data = reactive({
  queryParams: {
    flag: 0,
    type: 0,
    pageSize: 10,
    pageNum: 1, // 默认第一页显示一条数据，但其他页面可以选择显示其他

  },
  form: {},
});
const { queryParams, form } = toRefs(data);
// 团队
function organizationFN() {
  toggle.value = false;
  queryParams.value.flag = 0;
  queryParams.value.pageSize = 10;
  queryParams.value.pageNum = 1;
  initData();
}
// 项目参赛人
function projectFN() {
  toggle.value = true;
  queryParams.value.flag = 1;
  queryParams.value.pageSize = 10;
  queryParams.value.pageNum = 1;
  initData();
}

initData();
async function initData() {
  queryParams.value.cptId = id.value;
  let res = await getList(queryParams.value);
  form.value = res.data;
  if (res.data.groupList) {
    list.value = res.data.groupList.rows;
    total.value = res.data.groupList.total;
  } else {
    list.value = res.data.projectList.rows;
    total.value = res.data.projectList.total;
  }
}

// 团队数量athletes
function goGroup(id) {
  route.push({
    path: "/match/group",
    query: { id },
  });
}

// 运动员
function athletes(id) {
  route.push({
    path: "/match/sportsman",
    query: { id },
  });
}

// 赛事金额
function groupCost(id) {
  route.push({
    path: "/match/gameCost",
    query: { id },
  });
}

// 参赛人次
function peopleFN(id) {
  route.push({
    path: "/match/personTime",
    query: { id },
  });
}
</script>

<style scope>
.header {
  justify-content: space-between;
  padding: 0 20%;
  padding-top: 30px;
}
.code {
  text-align: center;
  cursor: pointer;
}
.codeText {
  font-size: 30px;
  display: flex;
  justify-content: center;
}
.codeNumber {
  font-size: 50px;
  color: #6364c1;
  margin-top: 30px;
  display: flex;
  justify-content: center;
  border-bottom: 3px solid #6364c1 !important;
}
.el-row {
  border: 0;
}
</style>
